<template>
    <div class="meeting">
        <!-- 表格 -->
        <el-table ref="editTable"
            :loading="loading"
            :maxHeight="maxHeight"
            border 
            :stripe='stripe'
            :data="props_data" :tooltip-effect="tooltip" style="width: 100%" @selection-change="handleSelectionChange">
            <slot name="table_before"></slot>
            <template v-for="(item,index) in columns">
                <!-- 表头全选 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='selection'" :fixed="item.fixed" :align="item.align" :key="index" :width="item.width" :type="item.type"></el-table-column>
                <!-- 复选框 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='checkbox'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row[item.prop]" @focus="handleInit(scope.row,item.prop)" @change="handleEdit(scope.row,item.prop,scope.row[item.prop])"></el-checkbox>
                    </template>
                </el-table-column>
                <!-- 多个radio -->
                <el-table-column show-overflow-tooltip v-if="item.type=='radio'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :type="item.type">
                    <template slot-scope="scope">
                        <el-radio-group clearable v-model="scope.row[item.prop]" @focus="handleInit(scope.row,item.prop)" @change="handleEdit(scope.row,item.prop,scope.row[item.prop])">
                            <el-radio v-for="citem in item.typeList" :key="citem.value" :label="citem.name"></el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <!-- select -->
                <el-table-column show-overflow-tooltip v-if="item.type=='select'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :type="item.type">
                    <template slot-scope="scope">
                        <el-select clearable v-model="scope.row[item.prop]" placeholder="请选择" @focus="handleInit(scope.row,item.prop)" @change="handleEdit(scope.row,item.prop,scope.row[item.prop])">
                            <el-option v-for="citem in item.typeList"
                                :key="citem.value"
                                :label="citem.type"
                                :value="citem.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <!-- 三级联动 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='cascader'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :type="item.type">
                    <template slot-scope="scope">
                        <el-cascader
                            v-model="scope.row[item.prop]"
                            :options="item.typeList"
                            @focus="handleInit(scope.row,item.prop)" @change="handleEdit(scope.row,item.prop,scope.row[item.prop])"></el-cascader>
                    </template>
                </el-table-column>
                <!-- 按钮表格 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='button'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :type="item.type">
                    <template slot-scope="scope">
                        <!-- 新增/编辑/查询按钮 -->
                        <el-button
                        v-for="citem in item.typeList"
                        :key="citem"
                        :size="citem.size"
                        :effect="citem.effect"
                        :type="citem.type"
                        @click="handleDelete(scope.$index, scope.row)">{{citem.buttonName}}</el-button>
                    </template>
                </el-table-column>
                <!-- 输入框 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='input'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row[item.prop]" @focus="handleInit(scope.row,item.prop)" @change="handleEdit(scope.row,item.prop,scope.row[item.prop])"></el-input>
                    </template>
                </el-table-column>
                <!-- 数据字典转换 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='dictionary'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width"
                >
                    <template slot-scope="scope">
                        {{typeFormatter(item.prop,item.dictData.typeName,item.dictData.typeCode,scope.row[item.prop])}}
                    </template>
                </el-table-column>
                <!-- 自定义数据字典转换 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='customDictionary'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width"
                :formatter="item.filterProp"></el-table-column>
                <!-- 日期 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='date'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :type="item.type">
                    <template slot-scope="scope">
                        <el-date-picker
                            v-model="scope.row[item.prop]"
                            type="date"
                            placeholder="选择日期"
                            >
                        </el-date-picker>
                    </template>
                </el-table-column>
                <!-- 普通列 -->
                <el-table-column show-overflow-tooltip v-else-if="item.type==''" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label">
                </el-table-column>
            </template>
            <slot name="table_after"></slot>
        </el-table>
        <!--分页-->
        <el-pagination
            v-if="isTable"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            style="text-align: right;margin:10px 0;"
            :current-page="props_pageNo"
            :page-size="pageSize"
            :page-sizes="pageSizeOpt"
            :total="props_total"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>
<script>
    // import qs from 'qs'
    import request from '@/utils/request.js'
    export default {
        name: "EditTable",
        props: {
            url:String,
            apiName:Function,
            tooltip:String,//dark、
            columns: {
                type: Array,
                default: () => []
            },
            isShowChild: {
                type: Boolean,
                default: false
            },
            tableData: {
                type: Array,
                default: () => []
            },
            stripe: {
                type: Boolean,
                default: false
            },
            pageSizeOpt:{
                type: Array,
                default() {
                    return [10, 20, 30, 50, 100];
                }
            },
            pageNum: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10,
            },
            maxHeight: {
                type: Number,
                default: 2000
            },
        },
        data() {
            return {
                isTable:true,
                loading:false,
                props_data: [],
                props_total: 0,
                props_pageNo: this.pageNum,
                props_query: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                },
                saveData:[],
                rowNum:1,
                checkedDetail:[],
                formatterList:{
                    "sex":[{"value":1,"type":"男"},{"type":"女","value":0}],
                    "IS_MARRY":[{isMarry:1,name:"是"},{isMarry:0,name:"否"}],
                    "STATE":[{"state":0,"type":'提交'},{"state":1,"type":'审核中'},{"state":2,"type":'已通过'},{"state":3,"type":'已拒绝'}],
                    "LEVEL":[{"level":"1","type":"一级"},{"level":"2","type":"二级"},{"level":"3","type":"三级"}]
                },
            }
        },
        created(){
        },
        mounted(){
            if(!this.isShowChild){//布局格式
                this.query();
            }
        },
        watch: {
            isShowChild: {
                handler(newValue, oldValue) {
                    this.props_data = this.tableData
                },
                deep: true
            }
            ,
        　　 tableData: {
                handler(newValue, oldValue) {
                    this.props_data = this.tableData
                },
                deep: true
　　　　　　  }
　　　　 },
           
        methods: {
            //查询
            query(arg) {
                let that = this;
                that.loading = true;
                let param = Object.assign(that.props_query,arg || {});
                if(arg && arg.pageNum){
                    param.pageNum = arg.pageNum;
                }
                let apiName = that.apiName;
                if(!apiName){
                    that.props_data = that.tableData ? that.tableData : [];
                    that.saveData = that.tableData ? [...that.tableData] : [];
                    that.saveDataInit();
                    return;
                }
                // qs.stringify
                apiName(param).then(res => {
                    that.loading = false;
                    res = res && res.rspBody ? res.rspBody : {}
                    if(JSON.stringify(res) == '{}'){
                        // that.props_data = []
                        // that.saveData = []
                        // debugger
                        that.props_data = that.tableData//暂时 只是为了效果展示
                        that.saveData = that.tableData ? [...that.tableData] : [];//暂时 只是为了效果展示
                        that.props_pageNo = that.pageNum || 1;//暂时 只是为了效果展示
                        that.props_total = that.tableData.length;//暂时 只是为了效果展示
                        that.saveDataInit();//暂时 只是为了效果展示
                        return 
                    }
                    res.resultData = res.resultData ? res.resultData : []
                    that.props_data = res.resultData;
                    that.props_pageNo = res.pageNum || 1;
                    that.props_total = res.total ? res.total :0;
                    that.saveDataInit();
                    that.$emit('queryResult', res);
                });
            },
            handleCurrentChange(pageNum) {
                var changeFlag = false;
                for(var i=0;i<this.saveData.length;i++){
                    if(this.saveData[i].opt&&this.saveData[i].opt == "insert"||this.saveData[i].opt == "update"||this.saveData[i].opt == "delete"){
                        changeFlag = true;
                        break;
                    }
                }
                if(changeFlag){
                    this.$alert("请先保存修改再切换分页", "提示");
                    return false;
                }
                this.query({
                    pageNum:pageNum
                });
            },
            // updateData(data){
            //     this.props_data = data;
            // },
            // 初始化数据
            saveDataInit() {
                for(var i=0;i<this.props_data.length;i++){
                    this.props_data[i].rowNum = this.rowNum;
                    this.rowNum++;
                }
                this.saveData = this.props_data ? [...this.props_data] : [];
            },
            handleSizeChange(size) {
                this.query({
                    pageNum:1,
                    pageSize:size
                });
            },
            formatterValue(row, column, cellValue) {
                return cellValue;
            },
            // 给数据添加默认值
            handleInit(row,prop) {
                let oldValue = 'old'+prop;
                if(!row[oldValue]){
                    row[oldValue] = row[prop];
                }
            },
            // 新增行
            addRow(list) {
                if(this.props_data == undefined){
                    this.props_data = new Array();
                }
                list.opt='insert';
                list.rowNum = this.rowNum;
                this.props_data.unshift(list);
                this.saveData.unshift(list);
                this.rowNum++;
            },
            // 给更改过的数据增加状态
            handleEdit(row,prop,value) {
                let oldValue = 'old'+prop;
                if(row.opt != "insert"&&row.opt != "delete"){
                    if(row[oldValue] != value){
                        row.opt = "update";
                    }else{
                        delete row.opt;
                    }
                }
            },
            // 删除行
            deleteRow() {
                let that = this
                if (that.checkedDetail.length == 0) {
                    that.$alert("请先选择要删除的数据", "提示", {
                        confirmButtonText: "确定",
                    });
                } else {
                    for (let i = 0; i < that.checkedDetail.length; i++) {
                        let data = that.checkedDetail
                        // 获取选中行的索引的方法
                        // 遍历表格中props_data数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
                        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
                        data.forEach((val, index) => {
                            that.props_data.forEach((v, i) => {
                                if (val.rowNum === v.rowNum) {
                                    // i 为选中的索引
                                    that.props_data.splice(i, 1);
                                }
                            })
                            that.saveData.forEach((item,index) => {
                                if(val.rowNum == item.rowNum){
                                    if(item.opt == "insert"){
                                        that.saveData.splice(index, 1);
                                    }else{
                                        item.opt = "delete";
                                    }
                                }
                            })
                            console.log('del')
                        })
                    }
                    // 删除完数据之后清除勾选框
                    that.$refs.editTable.clearSelection();
                    // console.log(this.props_data);     
                    // console.log(this.saveData);
                }
            },
            // 选中的数据
            handleSelectionChange(selection) {
                this.checkedDetail = selection;
                
                this.$emit('selectionChange', selection);
            },
            // 小代码转换
            typeFormatter(valueName,stringName,arrName,value){
                // 未转换字段名 valueName
                // 转换后字段名 stringName
                // 转换数组名 arrName
                // 当前转换的值 value
                for (var i in this.formatterList[arrName]) {
                    if (this.formatterList[arrName][i][valueName] == value){
                        return this.formatterList[arrName][i][stringName];
                    }
                }
            }
        }
    };
</script>
<style>
 /* lang="less" scoped */
.meeting{
    width: 100%;
    margin-top:10px;
}
.el-table th{
    background-color: #f8f8f9;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
}
.el-table tr,.el-table td{
    height:40px;
    box-sizing:border-box;
}
.el-table .el-input__inner{
    height:24px;
    line-height:24px;
    font-size:12px;
}
.el-table td, .el-table th{
    padding:8px 0;
}
.el-table .el-date-editor.el-input,.el-table .el-date-editor.el-input__inner{
    width:90%;
}
/* 日期控件icon */
.el-table .el-input__icon{
    line-height:24px;
}
.el-table .el-button{
    padding:4px 15px;
}
</style>